<template>
  <div>
    <div :ref="dragSource">121545</div>
    <div class="dropBox" :ref="drop">
    </div>
  </div>
</template>
<script setup>
import { watchEffect } from 'vue'
import { useDrag, useDrop } from 'vue3-dnd'
const [collectedProps, dragSource, dragPreview] = useDrag(() => ({
  type: 'drop',
  item: () => { // 在drop的hover的item获取
    return { id: '1' }
  },
  collect: monitor => {
    return {
      isDragging: () => monitor.isDragging()
    }
  },
  end: (item, monitor) => {
    console.log(monitor.getDropResult())
  }
}))

const [collect, drop] = useDrop(() => ({
  accept: 'drop',
  drop: () => ({ name: 'Dustbin' }), // 在drag的end的monitor.getDropResult()获取
  collect: monitor => ({
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop()
  }),
  hover: (item, monitor) => {
    // console.log(item, monitor)
    // console.log(monitor.isDragging);
  },
  canDrop: (item, monitor) => {
    return item.id === '2'
  }
}))
watchEffect(() => {
  // console.log(collectedProps.value.isDragging())
  // console.log({ drag: collectedProps.value, drop: collect.value })
})
</script>
<style lang="scss" scoped>
.dropBox {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>
